			/*!
			 * Ext JS Library 3.2.1
			 * Copyright(c) 2006-2010 Ext JS, Inc.
			 * licensing@extjs.com
			 * http://www.extjs.com/license
			 */
			Ext.onReady(function(){		
				// The new DataWriter component.
				var writer = new Ext.data.JsonWriter({
				   encode: true,
				   writeAllFields: true
				});
		
				var proxy = new Ext.data.HttpProxy({
				    api: {
				        read : 'http://localhost:8888/rciapp/user/Users.action?getDataUsers=',
				        create : 'contact/create.action',
				        update: 'contact/update.action',
				        destroy: 'http://localhost:8888/rciapp/user/Users.action?deleteUser='
				    }
				});
				
				var reader = new Ext.data.JsonReader({
					idProperty: 'user_id',
					root: 'rows',
					totalProperty: 'results',					
					fields: [
						{name: 'id'},
						{name: 'userId'},
						{name: 'username'},
						{name: 'password'},
						{name: 'levels'}
					]			
				});
		
				// create the Data Store
				var pagesize = 10; 
			    var store = new Ext.data.Store({
			        // load using script tags for cross domain, if the data in on the same domain as
			        // this page, an HttpProxy would be better
			        proxy: proxy,
							remoteSort:true,
							writer: writer,
							reader: reader
			    });
					
				var tb = new Ext.Toolbar();
			    tb.add({
		            text: 'Update',
		            icon: '../images/drop-yes.gif',  // <-- icon
		            cls: 'x-btn-text-icon',
					handler: function(){
						if (grid.getSelectionModel().hasSelection()) {
							if (grid.getSelectionModel().getCount() == 1) {
								var cell = grid.getSelectionModel().getSelected();
								//Ext.MessageBox.alert('cell= ' + cell.get('username'));
								Ext.getCmp("formUser").getForm().loadRecord(cell);
							}else{
								Ext.MessageBox.alert('Warning','Only one row selected.');
							}
						}else{
								Ext.MessageBox.alert('Warning','Please select the record.');
						}								
					}
	        	}, '-', {
	        		text: 'Delete',
		            icon: '../images/delete.gif',  // <-- icon
		            cls: 'x-btn-text-icon',
					handler: function(){
						if (grid.getSelectionModel().hasSelection()) {
							Ext.MessageBox.confirm('Confirm', 'Are you sure you want to delete?', function(btn, text){
								if(btn=='yes')
									showResult();												
						 	});
						}else{
							Ext.MessageBox.alert('Warning','Please select the record.');
						}	
					}
	        	});	
										
			    // the check column is created using a custom plugin
			    var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
			
			    var grid = new Ext.grid.GridPanel({
			        //width:744,
			        height:408,
			        //title:'Tabel User',
			        store: store,
			        trackMouseOver: true,
			        disableSelection: false,
					stripeRows: true,
					closable: true,
					renderTo: 'contentGrid',
					//selModel : checkBoxSelMod,
					//frame:true,				
			        // grid columns
			        columns:[checkBoxSelMod,{
			            header: "No",
			            dataIndex: 'id',
			            width: 30,
			            sortable: true
			        },{
			            header: "Username",
			            dataIndex: 'username',
			            width: 200,
									align: 'left',
			            sortable: true
			        },{
			            header: "Password",
			            dataIndex: 'password',
			            width: 300,
			            align: 'left',
			            sortable: true
			        },{
			            header: "Level",
			            dataIndex: 'levels',
			            width: 100,
									align: 'right',
			            sortable: true
			        },{
			            header: "User Id",
			            dataIndex: 'userId',
			            width: 50,
			            hidden: true
			        }],
					sm: new Ext.grid.CheckboxSelectionModel({
						singleSelect: false,
						listeners: {
							/*rowSelect: function(sm, row, rec){
								Ext.getCmp("formUser").getForm().loadRecord(rec);
							}*/
						}
					}),
					tbar:tb,
			        // paging bar on the bottom
			        bbar: new Ext.PagingToolbar({
			            pageSize: pagesize,
			            store: store,
			            displayInfo: true,
			            displayMsg: 'Displaying topics {0} - {1} of {2}',
			            emptyMsg: "No topics to display"
			        })
			    });	
				store.load({params:{start:0, limit:pagesize}});

				function showResult(){
					Ext.MessageBox.show({
					   msg: 'Deleting your data, please wait...',
					   progressText: 'Deleting...',
					   width:300,
					   wait:true,
					   waitConfig: {interval:100},
					   icon: 'ext-mb-download', //custom class in msg-box.html
					   animEl: 'mb7'
					});
					setTimeout(function(){
			            //This simulates a long-running operation like a database save or XHR call.
			            //In real code, this would be in a callback function.
						var cell= grid.getSelectionModel().getSelections();
						var tempDelete= "";
						for(var i=0;i<cell.length;i++){
							if(i<(cell.length - 1))
								tempDelete+= cell[i].get('userId')+', ';
							else
								tempDelete+= cell[i].get('userId');
						}
						Ext.Ajax.request({
							url: 'http://localhost:8888/rciapp/user/Users.action?deleteUser=',
							success: function(){
								Ext.MessageBox.hide();
								grid.getBottomToolbar().doRefresh();
								Ext.example.msg('Done', 'Your data was deleted!');									
							},
							failure: function(){
								Ext.MessageBox.hide();
								Ext.example.msg('Failed', 'Your data cannot deleted!');
							},
							params: {
								tmpDelete: tempDelete
							}
						})	            
					}, 3000);						
				}
					
				var simple = new Ext.FormPanel({
		        labelWidth: 75, // label settings here cascade unless overridden
		        //frame:true,
		        //width: 350,
		        //defaults: {width: 230},
		        defaultType: 'textfield',	
						renderTo: 'contentForm',
						autoScroll: true,
						id: 'formUser',
						bodyStyle: 'padding:10px',
		        items: [{
		                fieldLabel: 'Username',
		                name: 'data.username',
						id:'username',
						blankText: 'Username is required',
		                allowBlank: false
		            },{
		                fieldLabel: 'Password',
		                name: 'data.password',
						id:'password',
						blankText: 'Password is required',
						allowBlank: false
		            },{
		                fieldLabel: 'Level',
		                name: 'data.levels',
						id:'levels',
						blankText: 'Level is required',
						allowBlank: false
		            },{
		                //fieldLabel: 'UserId',
		                name: 'data.userId',
						id:'userId',
						allowBlank: true,
		                hidden: true
		            }
		        ],		
		        buttons: [{
		            text: 'Save',
					id: 'save',
					handler: function(){
						if (simple.getForm().isValid()) {
							var sb = Ext.getCmp('form-statusbar');
		                    sb.showBusy('Saving form...');
		                    simple.getEl().mask();				  
						  	simple.getForm().submit({
						  		url: '/rciapp/user/Users.action?saveUser=',
						  		waitMsg: 'Saving...',
						  		success: function(f, a){
						  			Ext.Msg.alert('Status', 'Save successfully', function(btn, text){
						  				if (btn == 'ok') {
						  					grid.getBottomToolbar().doRefresh();
						  					Ext.getCmp("formUser").getForm().reset();
						  				}
						  			});
					  				sb.setStatus({
									  text:'Form saved!',
									  iconCls:'',
									  clear: true
					  				});
					  				simple.getEl().unmask();
						  		},
						  		failure: function(f, a){
						  			Ext.Msg.alert('Warning', 'Error on saving data!...');
						  		}
						  	});
						  }
						}
		        },{
		        	text: 'Reset',
					id: 'reset',
					handler: function(){
		        		Ext.getCmp("formUser").getForm().reset();
		        	}
		        }]
				});					
    });